<template>
  <div class="upload-list-content" v-if="$route.query">
    <div v-loading="loading">
      <template v-if="showUpload">
        <el-upload
          ref="files"
          v-if="showUploadButton"
          class="upload-button"
          :multiple="multiple"
          :action="uploadImgUrl"
          :on-success="uploadSuccess"
          :before-upload="beforeAvatarUpload"
          :on-progress="handleUploadProgress"
          :on-error="handleUploadError"
          :show-file-list="false"
          :headers="headers"
        >
          <el-button plain>点击上传</el-button>
        </el-upload>
        <el-upload
          ref="files"
          v-else
          :style="cssStyle"
          class="upload-long"
          drag
          :multiple="multiple"
          :action="uploadImgUrl"
          :data="data"
          :accept="acceptType"
          :on-success="uploadSuccess"
          :before-upload="beforeAvatarUpload"
          :on-progress="handleUploadProgress"
          :on-error="handleUploadError"
          :show-file-list="false"
          :headers="headers"
          :name="paramsName"
        >
          <i class="el-icon-upload" style="color: #bbb; font-size: 18px"></i>
          <span class="el-upload__text">
            将文件拖到此处，或<el-button type="text">点击上传</el-button></span
          >
        </el-upload>
      </template>
      <div class="upload-text" v-if="showUndoExplain">
        <div class="title">上传须知：</div>
        <ul>
          <!-- <li>1、单次上传请选择100MB以内的文件进行上传；</li> -->
          <li>支持下列文件格式：{{ $route.query.fileType | typeFilter }}
            <span style="margin-left: 10px;">(禁止上传、存储涉密文件)</span>
          </li>
        </ul>
      </div>
      <div
        class="card-box"
        v-if="beforeFileList.length > 0 || fileList.length > 0"
      >
        <h2>导入预览</h2>
        <el-table :data="fileList" border size="medium" class="table">
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileName"
            sortable="custom"
            show-overflow-tooltip
            label="文件名称"
          >
            <template slot-scope="scope">
              <span
                style="
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                >{{ scope.row.fileName }}</span
              >
              <!-- <span>{{ scope.row.officeName }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="fileTypeName" label="文件类型">
          </el-table-column>
          <el-table-column prop="professionName" label="所属专业">
          </el-table-column>
          <el-table-column prop="fileFormat" label="文件格式"> </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button
                              type="text"
                              size="small"
                              @click="previewFile(scope.row)"
                              >预览
                          </el-button>
                          <el-divider direction="vertical"></el-divider> -->
              <el-button
                type="text"
                size="small"
                @click="handleUploadRemove(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="uploadStatusName" label="状态识别">
          </el-table-column>
          <el-table-column prop="uploadMessage" label="异常提示">
          </el-table-column>
          <!-- <el-table-column
                      prop="uploadMessage"
                      label="异常提示"
                  >
                      <template slot-scope="scope">

                          <span>{{ scope.row.uploadMessage || '' }}</span>
                      </template>
                  </el-table-column> -->
        </el-table>
      </div>
    </div>

    <!--视频预览-->
    <div class="video-play" v-if="videoFlag">
      <div class="video-close" @click="closeVideo">
        <i class="el-icon-circle-close" style="font-size: 40px"></i>
      </div>
      <template v-if="listVideoUrl.length > 1">
        <div class="video-prev" @click="videoPrev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="video-next" @click="videoNext">
          <i class="el-icon-arrow-right"></i>
        </div>
      </template>
      <video
        class="video"
        controls
        height="80%"
        width="70%"
        :src="getFileUrl(videoUrl)"
      ></video>
    </div>
    <!--附件预览-->
    <el-dialog
      :visible.sync="previewFlag"
      :append-to-body="true"
      :showClose="false"
      :close-on-click-modal="false"
      width="70%"
    >
      <div
        class="dialogHeader"
        slot="title"
        style="
          text-align: center;
          font-size: 18px;
          font-weight: 400;
          height: 28px;
        "
      >
        {{ previewName }}
        <span
          style="position: absolute; right: 20px; top: 18px; cursor: pointer"
          @click="previewFlag = false"
          ><i
            class="el-icon-error"
            style="font-size: 20px; vertical-align: middle"
          ></i
        ></span>
      </div>
      <div>
        <iframe
          align="center"
          width="100%"
          height="100%"
          :src="previewUrl"
          frameborder="no"
          border="0"
          marginwidth="0"
          marginheight="0"
          scrolling="no"
        ></iframe>
      </div>
    </el-dialog>

    <!-- 线形进度条 -->
    <div v-if="progressVisible" class="linear-progress-container">
        <div class="linear-progress-info">
            <span class="linear-progress-filename">{{ progressFileName }}</span>
            <span class="linear-progress-percentage">{{ Math.round(progressPercentage) }}%</span>
        </div>
        <el-progress 
            :percentage="Math.round(progressPercentage)" 
            :stroke-width="6"
            :show-text="false"
            status="success"
        ></el-progress>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  // name: 'PreviewUpload',
  data() {
    return {
      loading: false,
      beforeFileList: [],
      fileList: [],
      listImgUrl: [],
      listVideoUrl: [], // 视频预览数组
      videoFlag: false,
      videoUrl: "",
      previewFlag: false, // 文件预览弹框
      previewName: "", // 文件预览弹框标题
      previewUrl: "", // 文件预览地址
      lineWidth: "25%",
      checkList: [],
      // uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
      uploadImgUrl: "",
      headers: {
        token: localStorage.getItem("token"),
      },
      data: undefined,
      acceptType: null,
      fileSize: "",
      // 进度条相关
      progressVisible: false,
      progressPercentage: 0,
      progressFileName: '',
      progressTimer: null,
      currentUploadFile: null
    };
  },
  props: {
    delUrl: {
      type: String,
      default: () => {
        return "/event/transferrecord/transferRecord/deleteByAccessoryId";
      },
    },
    accessoryList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // acceptType: {
    //   type: String,
    //   default: () => {
    //     return '.doc,.docx,.ppt,.pdf,.xls,.xlsx'
    //   }
    // },
    // fileSize:{
    //   type: Number,
    //   default: () => {
    //     return 2 * 1024 * 1024 * 1024
    //   }
    // },
    uploadUrl: {
      type: String,
      default: () => {
        return "/knowledgeFile/file/upload";
      },
    },
    paramsName: {
      type: String,
      default: () => {
        return "files";
      },
    },
    // cssStyle样式示例
    /* cssStyle: {
            //单个卡片背景颜色及边框颜色
            fileCard: {
                borderColor: '#1c3f8c',
                background: '#1c3f8c'
            },
            //标题颜色
            titleName: {
                color: '#fff'
            },
            //时间,上传人,大小颜色
            info: {
                color: '#9b9b9b'
            },
            //按钮颜色
            btnColor: {
                color: '#fbb425'
            }
        }*/
    cssStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showUndoExplain: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示上传者姓名
    showCreateName: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示删除按钮
    showDeleteButton: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示上传功能
    showUpload: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否显示上传按钮
    showUploadButton: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否显示预览按钮
    showPreviewButton: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否显示下载按钮
    showDownloadButton: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否显示文件类型
    showFileType: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否显示文件大小
    showFileSize: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 批量上传
    multiple: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 同时只能上传一个附件
    isOnly: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 是否可被选择
    isChecked: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  computed: {
    beforeFileLength() {
      return this.beforeFileList.length;
    },
  },
  created() {
    this.data = this.$route.query;
  },
  filters:{
    typeFilter(item){
        console.log('ffff',item)
      if (item == 31 || item == 32 || item == 34) {
        return ".doc,.docx,.pdf";
      }
      if (item == 33) {
        return ".doc,.docx";
      }
      if (item == 38) {
        return ".avi,.mp4,.wmv,.mov";

      }
    }
  },
  mounted() {
    this.uploadImgUrl = this.$config.VUE_APP_BASE_API + this.uploadUrl;
    console.log(this.uploadUrl, this.$route.query.fileType, "uplpad----");


      // 这里处理文件的大小及类型显示
      this.fileSize = 2 * 1024 * 1024 * 1024; // 1 GB
      if (this.$route.query.fileType == 31 || this.$route.query.fileType == 32 || this.$route.query.fileType == 34) {
        this.acceptType = ".doc,.docx,.pdf";
      }
      if (this.$route.query.fileType == 33) {
        this.acceptType = ".doc,.docx";
      }
      if (this.$route.query.fileType == 38) {
        this.acceptType = ".avi,.mp4,.wmv,.mov";
        this.fileSize = 3 * 1024 * 1024 * 1024;
      }

      console.log(this.acceptType, this.$route.query.fileType, "文件类型限制");
      this.$forceUpdate();

  },
  watch: {
    accessoryList: {
      handler(accessoryList) {
        if (accessoryList.length > 0) {
          accessoryList.map((item) => {
            this.$set(item, "icon", this.getAccessoryIcon(item.type));
            this.$set(item, "checked", false);
          });
        }
        this.listImgUrl = [];
        this.listVideoUrl = [];
        this.fileList = accessoryList;
        // this.fileList.forEach((item) => {
        //   if (!item.accessoryId) {
        //     this.$set(item, 'accessoryId', item.id)
        //   }
        //   // this.$set(item, 'isNow', item.type === 'image' || item.type === 'video' ? false : true)
        //   if (item.type === 'image') {
        //     if (item.accessoryId) {
        //       this.listImgUrl.push(item.accessoryId)
        //     } else {
        //       this.listImgUrl.push(item.id)
        //     }
        //   } else if (item.type === 'video') {
        //     // 获取视频第一帧作为封面图
        //     if (!item.url) {
        //       if (item.accessoryId) {
        //         this.$set(item, 'url', this.getFileUrl(item.accessoryId))
        //       } else {
        //         this.$set(item, 'url', this.getFileUrl(item.id))
        //       }
        //       this.getVideoCover(item)
        //     }
        //     this.listVideoUrl.push(
        //       item.accessoryId ? item.accessoryId : item.id
        //     )
        //   }
        // })
        this.$emit("getValue", this.fileList, this.beforeFileList);
      },
      immediate: true,
      deep: false,
    },
    beforeFileLength: {
      handler(newVal) {
        this.loading = newVal !== 0;
      },
    },
  },
  methods: {
    // 附件上传成功
    uploadSuccess(res, file, fileList) {
      console.log('res666',res)
      // 停止进度条并显示成功
      this.stopFakeProgress(true)
      if (res.code === 200) {
        // this.fileList.push({
        //   accessoryId: res.newFileName,
        //   officeName: res.originalFilename,
        //   url: res.url,
        //   id: res.newFileName,
        //   type: 'image',
        // //   type: 'video',
        // })
        this.beforeFileList = this.beforeFileList.filter(
          (item) => item.uid !== file.uid
        );
        this.fileList.push(res.data[0]);
      }
      if(res.code == 1000){
        this.$message.warning(res.msg)
        this.loading = false;
      }
      //   this.$set(
      //     res.accessory,
      //     'icon',
      //     this.getAccessoryIcon(res.accessory.type)
      //   )
      //   this.$set(res.accessory, 'accessoryId', res.accessory.id)
      //   this.$set(
      //     res.accessory,
      //     'isNow',
      //     !(res.accessory.type === 'image' || res.accessory.type === 'video')
      //   )
      //   this.fileList.push(res.accessory)
      //   if (res.accessory.type === 'image') {
      //     this.listImgUrl.push(res.accessory.id)
      //   } else if (res.accessory.type === 'video') {
      //     this.listVideoUrl.push(res.accessory.id)
      //     // 获取视频第一帧作为封面图
      //     this.$set(res.accessory, 'url', this.getFileUrl(res.accessory.id))
      //     this.getVideoCover(res.accessory)
      //   }
      //   this.$message({
      //     showClose: true,
      //     message: '上传成功！',
      //     type: 'success'
      //   })
      //   this.$emit('getValue', this.fileList)
      //   for (const i in this.beforeFileList) {
      //     if (this.beforeFileList[i].uid === file.uid) {
      //       this.beforeFileList.splice(i, 1)
      //       return false
      //     }
      //   }
    },
    beforeAvatarUpload(file) {
    console.log("🚀 ~ file:", file)

      // 启动内部进度条
      this.startFakeProgress(file);
      
      console.log("上传前file类型过滤",this.acceptType)
      if (this.isOnly) {
        this.fileList = [];
        this.listImgUrl = [];
        this.listVideoUrl = [];
        this.beforeFileList = [];
      }
      // const isLt2M = file.size / 1024 / 1024 < 100
      const isLt2M = file.size < this.fileSize;
      const fileTypes = this.acceptType.split(",");
      const fileName = file.name.lastIndexOf(".");
      const fileNameLen = file.name.length;
      const fileTypeName = file.name.substring(fileName, fileNameLen);
      const fileIndex = fileTypes.indexOf(fileTypeName);
      const fileRepeat = this.fileList.find(
        (item) => item.fileName == file.name
      );
      console.log(this.fileList, file, "文件信息");
      if (!isLt2M) {
        setTimeout(() => {
          this.$message.warning(
            `系统仅允许单个附件大小在${
              this.fileSize / 1024 / 1024 / 1024
            }G以内的文件进行上传，本次上传有文件超出限制，请重新选择！`
          );
        }, 0);
      } else if (fileIndex === -1) {
        setTimeout(() => {
          this.$message.warning(
            "您选择的文件格式不在系统支持的范围内，请重新选择！"
          );
        }, 0);
      } else if (file.size === 0) {
        setTimeout(() => {
          this.$message.warning("上传文件不能为空！");
        }, 0);
      } else if (fileRepeat) {
        setTimeout(() => {
          this.$message.warning("当前文件不可重复导入！");
        }, 0);
      } else {
        this.beforeFileList.push({
          uid: file.uid,
          name: file.name,
          percentage: 0,
          size: file.size,
          isSuccess: false,
        });
      }
      return isLt2M && fileIndex !== -1 && !fileRepeat && file.size !== 0;
    },
    handleUploadError: function (response, file, fileList) {
      // 停止进度条并显示失败
      this.stopFakeProgress(false)
      for (const i in this.beforeFileList) {
        if (this.beforeFileList[i].uid === file.uid) {
          this.beforeFileList.splice(i, 1);
          this.$message({
            showClose: true,
            message: "文件上传失败，请您重新上传！",
            type: "warning",
          });
          return false;
        }
      }
    },
    handleUploadProgress(event, file, fileList) {
      const currentFile = this.beforeFileList.filter((f) => f.uid === file.uid);
      if (currentFile && currentFile.length > 0) {
        currentFile[0].percentage = parseInt(event.percent.toFixed(0));
      }
    },
    // 附件删除
    handleUploadRemove(item) {
      this.$confirm("确定要删除此附件吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   this.$http({
          //     url: ’,
          //     method: 'post',
          //     data: {
          //       id: item.id
          //     }
          //   }).then(({ data }) => {
          //     this.fileList = this.fileList.filter((i) => i.id !== item.id)
          //     this.$message({
          //       message: '删除成功！',
          //       type: 'success'
          //     })
          //     this.$emit('getValue', this.fileList)
          //   })
          this.fileList = this.fileList.filter(
            (i) => i.fileUploadName !== item.fileUploadName
          );
          this.$message({
            message: "删除成功！",
            type: "success",
          });
          this.$emit("getValue", this.fileList);
        })
        .catch(() => {});
    },
    // 附件下载
    downloadAccessory(item) {
      if (item.accessoryId) {
        this.$utils.download({ url: `/sys/accessory/download/${item.accessoryId}` });
      } else {
        this.$utils.download({ url: `/sys/accessory/download/${item.id}` });
      }
    },
    // 附件选择
    changeChecked(isChecked, item) {
      if (this.checkList.length > 0) {
        if (isChecked) {
          this.checkList.push(item.id);
        } else {
          this.checkList.splice(this.checkList.indexOf(item.id), 1);
        }
      } else {
        if (isChecked) {
          this.checkList.push(item.id);
        }
      }
      this.$emit("checked", this.checkList);
    },
    // 附件图标
    getAccessoryIcon(type) {
      let icon = "";
      if (type === "code") {
        icon = require("@/assets/images/fileIcon/iconcode.png");
      } else if (type === "html") {
        icon = require("@/assets/images/fileIcon/iconcode.png");
      } else if (type === "word") {
        icon = require("@/assets/images/fileIcon/icondocdocx.png");
      } else if (type === "text") {
        icon = require("@/assets/images/fileIcon/iconTXT.png");
      } else if (type === "ppt") {
        icon = require("@/assets/images/fileIcon/iconpptpptx.png");
      } else if (type === "pdf") {
        icon = require("@/assets/images/fileIcon/iconpdf.png");
      } else if (type === "archive") {
        icon = require("@/assets/images/fileIcon/iconrarzip.png");
      } else if (type === "fa-windows") {
        icon = require("@/assets/images/fileIcon/iconfa-windowswindows.png");
      } else if (type === "video") {
        icon = require("@/assets/images/fileIcon/iconvideo.png");
      } else if (type === "audio") {
        icon = require("@/assets/images/fileIcon/iconaudio.png");
      } else if (type === "flash") {
        icon = require("@/assets/images/fileIcon/iconflash.png");
      } else if (type === "image") {
        icon = require("@/assets/images/fileIcon/iconjpgpnggif.png");
      } else if (type === "file") {
        icon = require("@/assets/images/fileIcon/iconbianzu.png");
      } else if (type === "excel") {
        icon = require("@/assets/images/fileIcon/iconxlsxlsx.png");
      } else if (type === "ofd") {
        icon = require("@/assets/images/fileIcon/iconofd.png");
      }
      return icon;
    },
    // 视频切换上一个
    videoPrev() {
      let prevIndex;
      this.listVideoUrl.forEach((item, index) => {
        if (item === this.videoUrl) {
          if (index === 0) {
            prevIndex = this.listVideoUrl.length - 1;
          } else {
            prevIndex = index - 1;
          }
        }
      });
      this.videoUrl = this.listVideoUrl[prevIndex];
    },
    // 视频切换下一个
    videoNext() {
      let nextIndex;
      this.listVideoUrl.forEach((item, index) => {
        if (item === this.videoUrl) {
          if (index === this.listVideoUrl.length - 1) {
            nextIndex = 0;
          } else {
            nextIndex = index + 1;
          }
        }
      });
      this.videoUrl = this.listVideoUrl[nextIndex];
    },
    // 是否显示视频
    closeVideo() {
      this.videoFlag = false;
    },
    // 视频截取第一帧作为背景图
    getVideoCover(file) {
      const _self = this;
      _self.$set(file, "videoUrl", _self.deepClone(file.url)); // 备份视频源路径，用于后续预览展示
      const video = document.createElement("video"); // 也可以自己创建video
      video.src = file.url; // url地址 url跟 视频流是一样的
      file.url = file.icon; // 设置默认封面，videoDefCover 为预制的默认封面，不需要可去除或替换成自己的
      const canvas = document.createElement("canvas"); // 获取 canvas 对象
      const ctx = canvas.getContext("2d"); // 绘制2d
      video.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
      video.currentTime = 1; // 第一帧
      video.oncanplay = () => {
        canvas.width = video.clientWidth ? video.clientWidth : 120; // 获取视频宽度
        canvas.height = video.clientHeight ? video.clientHeight : 80; // 获取视频高度
        // 利用canvas对象方法绘图
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        // 转换成base64形式
        const _videoFirstimgsrc = canvas.toDataURL("image/png"); // 截取后的视频封面
        _self.$set(file, "url", _videoFirstimgsrc); // 重置文件的url为当前截取的封面，用于 el-upload展示
        video.remove();
        canvas.remove();
      };
    },
    // 附件预览
    previewFile(item) {
      if (item.fileFormat === "jpeg" || item.fileFormat === "jpg") {
        // const list = []
        // let initIndex = 0
        // this.listImgUrl.forEach((temp, index) => {
        //   list.push(this.getFileUrl(temp))
        //   if (item.accessoryId === temp) {
        //     initIndex = index
        //   }
        // })
        // this.$viewerApi({
        //   options: {
        //     initialViewIndex: initIndex,
        //     zIndex: 9999
        //   },
        //   images: list // urlList是经过过滤后的的，里面的都是要预览的图片的地址
        // })
      } else if (item.type === "video") {
        this.videoUrl = item.accessoryId;
        this.videoFlag = true;
      } else {
        if (
          item.type === "word" ||
          item.type === "ppt" ||
          item.type === "text" ||
          item.type === "pdf" ||
          item.type === "excel" ||
          item.type === "ofd"
        ) {
          if (item.isNow) {
            this.$message({
              showClose: true,
              message: "该类型文件尚未提交保存，暂不支持预览！",
              type: "warning",
            });
          } else {
            this.previewName = item.name;
            const ofdId =
              item.type === "ofd" || item.ofdId ? item.ofdId : item.accessoryId;
            this.previewUrl = `${
              process.env.VUE_APP_OFD_PREVIEW_URL
            }?file=${window.getFile(ofdId)}`;
            this.previewFlag = true;
          }
        } else {
          this.$message({
            showClose: true,
            message: "该类型文件暂不支持预览！",
            type: "warning",
          });
        }
      }
    },
    
    // 开始模拟进度条
    startFakeProgress(file) {
      // 清除可能存在的定时器
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
        this.progressTimer = null;
      }
      
      // 重置进度条状态
      this.progressVisible = true;
      this.progressPercentage = 0;
      this.progressFileName = file.name;
      this.currentUploadFile = file;
      
      // 计算文件大小（MB）
      const fileSizeMB = file.size / (1024 * 1024);
      console.log(`文件大小: ${fileSizeMB.toFixed(2)} MB`);
      
      // 基础上传速度（MB/ms）
      const baseUploadSpeed = 0.0016; // 调整为与Video组件一致的基准速度
      
      // 基础时间计算
      let totalAnimationTime = fileSizeMB / baseUploadSpeed;
      
      // 最小时间限制（至少3秒 = 3000毫秒）
      totalAnimationTime = Math.max(totalAnimationTime, 3000);
      
      // 中文件微调（10-50MB的文件）
      if (fileSizeMB >= 10 && fileSizeMB < 50) {
        // 线性调整，确保13MB文件显示约20秒
        totalAnimationTime *= 0.8;
      }
      
      // 超大文件处理（>2GB）
      if (fileSizeMB > 2048) {
        // 随着文件增大，时间增长速度递减
        const overSizeFactor = Math.pow(fileSizeMB / 2048, 0.7);
        totalAnimationTime = 2048 / baseUploadSpeed * overSizeFactor;
      }
      
      // 添加5%的随机波动，使进度条看起来更真实
      const randomFactor = 0.95 + Math.random() * 0.1;
      totalAnimationTime *= randomFactor;
      
      console.log(`计算出的动画总时间: ${totalAnimationTime.toFixed(2)} ms`);
      
      // 计算每16ms应该增加的进度（60fps）
      const progressIncrement = 100 / (totalAnimationTime / 16);
      console.log(`每次增加的进度: ${progressIncrement.toFixed(4)}%`);
      
      // 设置定时器，模拟进度增长
      this.progressTimer = setInterval(() => {
        this.progressPercentage += progressIncrement;
        
        // 确保进度不超过99%，留1%给真实完成时处理
        if (this.progressPercentage >= 99) {
          this.progressPercentage = 99;
        }
      }, 16);
    },
    
    // 停止模拟进度条
    stopFakeProgress(isSuccess = true) {
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
        this.progressTimer = null;
      }
      
      // 如果上传成功，将进度设置为100%，然后延迟隐藏
      if (isSuccess) {
        this.progressPercentage = 100;
        setTimeout(() => {
          this.progressVisible = false;
          this.progressPercentage = 0;
          this.progressFileName = '';
          this.currentUploadFile = null;
        }, 500);
      } else {
        // 如果上传失败，立即隐藏
        this.progressVisible = false;
        this.progressPercentage = 0;
        this.progressFileName = '';
        this.currentUploadFile = null;
      }
    },
  },
};
</script>
<style lang="scss">
.upload-list-content {
  .upload-long {
    .el-upload {
      width: 100% !important;
      .el-upload-dragger {
        width: 100% !important;
        height: 40px !important;
        border-radius: 2px;
        .el-icon-upload {
          margin: 0 !important;
          line-height: 35px !important;
        }
      }
    }
  }
  button {
    width: auto !important;
  }
  .upload-text {
    font-size: 14px;
    .title {
      margin: 0;
      text-align: left;
    }
    ul {
      color: #ff0000;
      padding-left: 0 !important;
      margin: 5px auto;
    }
    li {
      line-height: 22px;
      word-wrap: break-word;
      list-style: none;
    }
  }
  .card-box {
    margin-top: 20px;
    h2 {
      font-size: 18px;
      font-weight: 550;
    }
    .fileItem {
      width: var(--lineWidth);
      text-align: center;
      padding: 0 5px 15px;
      position: relative;
      .item-check {
        position: absolute;
        left: 8px;
        top: 0;
        &::v-deep {
          .el-checkbox__inner {
            border-color: #1b69d2;
          }
        }
      }
      .fileCard {
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #f9f9f9;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 10px 10px;
        &:hover {
          opacity: 0.8;
        }
        img {
          height: 80px;
          min-height: 80px;
          width: auto;
          max-width: 100%;
          object-fit: contain;
          position: initial;
          cursor: pointer;
        }
        .video {
          position: relative;
          i {
            font-size: 26px;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -13px;
            margin-left: -13px;
            cursor: pointer;
          }
        }
        .fileInfo {
          width: 100%;
          line-height: normal !important;
          margin-top: 5px;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 20px;
            color: #2e2e2e;
          }
          .originalSize {
            span {
              color: #b0b0b0;
              font-size: 12px;
            }
          }
        }
        .el-progress-bar__outer {
          height: 3px !important;
        }
      }
    }
    .el-card__body {
      padding: 0 !important;
      max-width: 100%;
      width: 100%;
    }
    .handleBtns {
      position: initial;
      /*line-height: 52px;
            right: 10px;
            bottom: 0;*/
      line-height: initial;
      button {
        padding: 0;
      }
    }
    .fileCard {
      width: 100%;
      padding: 5px 46px;
      position: relative;
      margin-bottom: 10px;
      display: flex;
      border: 1px solid #d9d9d9;
      img {
        width: 25px;
        position: absolute;
        left: 10px;
        top: 12px;
      }
      .el-icon-loading {
        width: 20px;
        height: 24px;
        position: absolute;
        left: 10px;
        top: 12px;
        font-size: 24px;
      }
      .fileInfo {
        width: 100%;
        line-height: normal !important;
        span {
          /*overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;*/
          line-height: 20px;
          color: #2e2e2e;
          display: block;
          cursor: pointer;
        }
        .originalSize {
          span {
            color: #b0b0b0;
            font-size: 12px;
            display: inline-block;
            cursor: default;
          }
        }
      }
      .el-progress-bar__outer {
        height: 3px !important;
      }
    }
  }
}
.video-play {
  z-index: 999999999999999;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(14, 13, 13, 0.5);
  top: 6%;
  left: 0;
  .video {
    margin-left: 15%;
  }
  .video-close {
    margin-left: 89%;
    margin-top: 2%;
    color: #fff;
    cursor: pointer;
  }
  .video-prev {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #2e2e2e;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    top: 50%;
    left: 5%;
    margin-top: -25px;
    text-align: center;
    i {
      font-size: 40px;
      margin-top: 5px;
    }
    &:hover {
      opacity: 0.8;
    }
  }
  .video-next {
    width: 50px;
    height: 50px;
    position: absolute;
    background: #2e2e2e;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    top: 50%;
    right: 5%;
    margin-top: -25px;
    text-align: center;
    i {
      font-size: 40px;
      margin-top: 5px;
    }
    &:hover {
      opacity: 0.8;
    }
  }
}
/* 线形进度条样式 */
.linear-progress-container {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fff;
}
.linear-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}
.linear-progress-filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}
.linear-progress-percentage {
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}
.el-progress-bar__outer {
    border-radius: 3px;
}
.el-progress-bar__inner {
    border-radius: 3px;
    transition: width 0.3s ease;
}
</style>
<style lang="scss" scoped>
.fileItem {
  .item-check {
    &::v-deep {
      .el-checkbox__inner {
        border-color: #1b69d2;
      }
    }
  }
}
</style>
